<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Bootstrap 3 Compatibility Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <h2>Not Bootstrap form</h2>
    <form>
      <p>Text
        <input type="text" data-validation="required">
      </p>
      <p>Check
        <input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 1
        <input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 2
        <input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 3
      </p>
      <p>Select
        <input type="radio" name="exampleRadio" data-validation="required"> Radio 1
        <input type="radio" name="exampleRadio" data-validation="required"> Radio 2
        <input type="radio" name="exampleRadio" data-validation="required"> Radio 3
      </p>
      <input type="submit" class="button">
    </form>
    <hr>
    <h2>Basic form</h2>
    <form>
      <div class="form-group">
        <label class="control-label">Text</label>
        <input type="text" class="form-control" data-validation="required">
      </div>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></div>
          <input type="text" class="form-control" data-validation="required">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label">Check</label>
        <div class="checkbox">
          <label>
            <input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 1
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 2
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 3
          </label>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label">Select</label>
        <div class="radio">
          <label>
            <input type="radio" name="exampleRadio" data-validation="required"> Radio 1
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="exampleRadio" data-validation="required"> Radio 2
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="exampleRadio" data-validation="required"> Radio 3
          </label>
        </div>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <hr>
    <h2>Inline form</h2>
    <form class="form-inline">
      <div class="form-group">
        <label class="control-label">Text</label>
        <input type="text" class="form-control" data-validation="required">
      </div>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></div>
          <input type="text" class="form-control" data-validation="required">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label">Check</label>
        <div class="checkbox">
          <label class="checkbox-inline">
            <input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 1
          </label>
        </div>
        <div class="checkbox">
          <label class="checkbox-inline">
            <input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 2
          </label>
        </div>
        <div class="checkbox">
          <label class="checkbox-inline">
            <input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 3
          </label>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label">Select</label>
        <div class="radio">
          <label class="radio-inline">
            <input type="radio" name="exampleRadio" data-validation="required"> Radio 1
          </label>
        </div>
        <div class="radio">
          <label class="radio-inline">
            <input type="radio" name="exampleRadio" data-validation="required"> Radio 2
          </label>
        </div>
        <div class="radio">
          <label class="radio-inline">
            <input type="radio" name="exampleRadio" data-validation="required"> Radio 3
          </label>
        </div>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <hr>
    <h2>Horizontal form</h2>
    <form class="form-horizontal">
      <div class="form-group">
        <label class="control-label col-sm-2" >Text</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" data-validation="required">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2">Text</label>
        <div class="col-sm-5">
          <input type="text" class="form-control" data-validation="required">
        </div>
        <div class="col-sm-5">
          <input type="text" class="form-control" data-validation="required">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2">Text</label>
        <div class="col-sm-10">
          <div class="input-group">
            <div class="input-group-addon"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></div>
            <input type="text" class="form-control" data-validation="required">
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2">Text</label>
        <div class="col-sm-5">
          <div class="input-group">
            <div class="input-group-addon"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></div>
            <input type="text" class="form-control" data-validation="required">
          </div>
        </div>
        <div class="col-sm-5">
          <div class="input-group">
            <div class="input-group-addon"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></div>
            <input type="text" class="form-control" data-validation="required">
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2">Check</label>
        <div class="col-sm-10">
          <div class="checkbox">
            <label>
              <input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 1
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 2
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 3
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2">Select</label>
        <div class="col-sm-10">
          <div class="radio">
            <label>
              <input type="radio" name="exampleRadio" data-validation="required"> Radio 1
            </label>
          </div>
          <div class="radio">
            <label>
              <input type="radio" name="exampleRadio" data-validation="required"> Radio 2
            </label>
          </div>
          <div class="radio">
            <label>
              <input type="radio" name="exampleRadio" data-validation="required"> Radio 3
            </label>
          </div>
        </div>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <hr>
  </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="../form-validator/jquery.form-validator.js"></script>
<script>
  $(function() {
    // setup validate
    $.validate();
  });
</script>
</body>
</html>
